<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="css/mui.css" rel="stylesheet" />
	<style type="text/css">
		body{
			background-color: white;
		}
		.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable {
			background-color: #EC971F;
		}
		.mui-scroll-wrapper{
			background-color: #EFEFF4;
		}
		.offCanva-header img{
			border-radius: 80px;
		}
	</style>
</head>

<body>
<script src="js/mui.js"></script>
<script type="text/javascript">
mui.init()
mui('#offCanvasSideScroll').scroll();
			mui('#offCanvasContentScroll').scroll();
</script>
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable mui-scalable">
			<!-- 侧滑菜单部分 -->
			<aside id="offCanvasSide" class="mui-off-canvas-left">
				<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view mui-grid-view" style="margin-top: 0px; background-color: #EC971F;">
							<li class="mui-table-view-cell mui-media mui-col-xs-6">
								<a href="#" class="offCanva-header">
									<img class="mui-media-object" src="images/home/touxiang_moren.jpg" style="width: 110px; height: 110px;">
									<div style="color: white;font-size: 20px; margin-top: 10px;">点击头像登录</div>
								</a>
							</li>
						</ul>
						<div class="offCanva-content" style="background-color: #EFEFF4; padding-top: 20px; padding-bottom: 90px;">
							<ul class="mui-table-view">
								<li class="mui-table-view-cell">
									<a class="mui-navigate-right">
										我的钱包
									</a>
								</li>
							</ul>
							<div id="" style="height: 15px;"></div>
							<ul class="mui-table-view" class="background-color: #EFEFF4;">
								<li class="mui-table-view-cell">
									<a class="mui-navigate-right">
										最近浏览
									</a>
								</li>
								<li class="mui-table-view-cell">
									<a class="mui-navigate-right">
										收藏
									</a>
								</li>
								<li class="mui-table-view-cell">
									<a class="mui-navigate-right">
										评价
									</a>
								</li>
								<li class="mui-table-view-cell">
									<a class="mui-navigate-right">
										关于我们
									</a>
								</li>
								<li class="mui-table-view-cell">
									<a class="mui-navigate-right">
										联系客服
									</a>
								</li>
							</ul>
							<div id="" style="height: 15px;"></div>
							<ul class="mui-table-view" class="background-color: #EFEFF4;">
								<li class="mui-table-view-cell" id="setting">
									<a class="mui-navigate-right">
										设置
									</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</aside>
	<!-- 主界面部分 -->
			<div class="mui-inner-wrap">
<header class="mui-bar mui-bar-nav" style="background-color: #EC971F;">
	<a href="#offCanvasSide" class="mui-action-menu mui-icon mui-icon-bars mui-pull-left" style="color: white;"></a>
	<h1 class="mui-title" style="color: white;">历史订单</h1>
</header>


<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
					<div class="mui-scroll">
	<ul class="mui-table-view">
		<li class="mui-table-view-cell mui-media">
			<a href="javascript:;">
				<img class="mui-media-object mui-pull-left" src="images/restaurant/xiaoshidai.jpg">
				<div class="mui-media-body"  resName="小食代脆皮鸡卤肉饭" orderCont="鱼香脆皮鸡肉饭（小份）" orImg="images/restaurant/jituifan.jpg">
					小食代脆皮鸡卤肉饭
					<span style="color:red;font-size:30px;margin-top: 6px;float:right;">10</span><span style="color:red;margin-top: 6px;font-size:17px;float:right;">￥</span>
					<p>2018-11-03 10:20</p>
					<div style="margin-top: 15px;">
						<div style="font-size:15px;color: black;text-overflow: ellipsis;overflow:hidden;white-space:nowrap; width:200px;">鱼香脆皮鸡肉饭（小份）</div>
						<div style="font-size: 12px;color:#8f8f94 ;margin-top:-18px;float: right;">已送达</div>
					</div>
					<div style="float: right;margin: 15px -36px 0 0;">
						<button type="button" class="mui-btn mui-btn-warning mui-btn-outlined">
							再来一单
						</button>
					</div>
				</div>
			</a>
		</li>
		<li class="mui-table-view-cell mui-media">
			<a href="javascript:;">
				<img class="mui-media-object mui-pull-left" src="images/restaurant/lanzhoulamian.jpg">
				<div class="mui-media-body"  resName="兰州拉面" orderCont="牛肉拉面 × 2"  orImg="images/restaurant/lamian.jpg">
					兰州拉面
					<span style="color:red;font-size:30px;margin-top: 6px;float:right;">23</span><span style="color:red;margin-top: 6px;font-size:17px;float:right;">￥</span>
					<p>2018-11-01 09:04</p>
					<div style="margin-top: 15px;">
						<div style="font-size:15px;color: black;text-overflow: ellipsis;overflow:hidden;white-space:nowrap; width:200px;">牛肉拉面 × 2</div>
						<div style="font-size: 12px;color:#8f8f94 ;margin-top:-18px;float: right;">已送达</div>
					</div>
					<div style="float: right;margin: 15px -36px 0 0;">
						<button type="button" class="mui-btn mui-btn-warning mui-btn-outlined">
							再来一单
						</button>
					</div>
				</div>
			</a>
		</li>
		<li class="mui-table-view-cell mui-media">
			<a href="javascript:;">
				<img class="mui-media-object mui-pull-left" src="images/restaurant/huangmenji.jpg">
				<div class="mui-media-body" resName="黄焖鸡米饭" orderCont="黄焖鸡米饭 + 黄焖豆腐 ×2" orImg="images/restaurant/huangmenjimifan.jpg">
					黄焖鸡米饭
					<span style="color:red;font-size:30px;margin-top: 6px;float:right;">36</span><span style="color:red;margin-top: 6px;font-size:17px;float:right;">￥</span>
					<p>2018-10-03 15:20</p>
					<div style="margin-top: 15px;">
						<div style="font-size:15px;color: black;text-overflow: ellipsis;overflow:hidden;white-space:nowrap; width:200px;">黄焖鸡米饭 + 黄焖豆腐 ×2</div>
						<div style="font-size: 12px;color:#8f8f94 ;margin-top:-18px;float: right;">已送达</div>
					</div>
					<div style="float: right;margin: 15px -36px 0 0;">
						<button type="button" class="mui-btn mui-btn-warning mui-btn-outlined">
							再来一单
						</button>
					</div>
				</div>
			</a>
		</li>
		<li class="mui-table-view-cell mui-media">
			<a href="javascript:;">
				<img class="mui-media-object mui-pull-left" src="images/restaurant/xiaoshidai.jpg">
				<div class="mui-media-body"   resName="小食代脆皮鸡卤肉饭" orderCont="鱼香脆皮鸡肉饭（小份）" orImg="images/restaurant/jituifan.jpg">
					小食代脆皮鸡卤肉饭
					<span style="color:red;font-size:30px;margin-top: 6px;float:right;">10</span><span style="color:red;margin-top: 6px;font-size:17px;float:right;">￥</span>
					<p>2018-11-03 10:20</p>
					<div style="margin-top: 15px;">
						<div style="font-size:15px;color: black;text-overflow: ellipsis;overflow:hidden;white-space:nowrap; width:200px;">鱼香脆皮鸡肉饭（小份）</div>
						<div style="font-size: 12px;color:#8f8f94 ;margin-top:-18px;float: right;">已送达</div>
					</div>
					<div style="float: right;margin: 15px -36px 0 0;">
						<button type="button" class="mui-btn mui-btn-warning mui-btn-outlined">
							再来一单
						</button>
					</div>
				</div>
			</a>
		</li>
		<li class="mui-table-view-cell mui-media">
			<a href="javascript:;">
				<img class="mui-media-object mui-pull-left" src="images/restaurant/xiaoshidai.jpg">
				<div class="mui-media-body"   resName="小食代脆皮鸡卤肉饭" orderCont="鱼香脆皮鸡肉饭（小份）">
					小食代脆皮鸡卤肉饭
					<span style="color:red;font-size:30px;margin-top: 6px;float:right;">10</span><span style="color:red;margin-top: 6px;font-size:17px;float:right;">￥</span>
					<p>2018-11-03 10:20</p>
					<div style="margin-top: 15px;">
						<div style="font-size:15px;color: black;text-overflow: ellipsis;overflow:hidden;white-space:nowrap; width:200px;">鱼香脆皮鸡肉饭（小份）</div>
						<div style="font-size: 12px;color:#8f8f94 ;margin-top:-18px;float: right;">已送达</div>
					</div>
					<div style="float: right;margin: 15px -36px 0 0;">
						<button type="button" class="mui-btn mui-btn-warning mui-btn-outlined">
							再来一单
						</button>
					</div>
				</div>
			</a>
		</li>
	</ul>
</div>
<!-- off-canvas backdrop -->
				<div class="mui-off-canvas-backdrop"></div>
					</div>
				</div>

<script type="text/javascript">
//点击订单
mui(".mui-table-view-cell").on("tap","a",function(){
	var resName = this.children[1].getAttribute("resName");
	var orderCont = this.children[1].getAttribute("orderCont");
	var orImg = "../" +  this.children[1].getAttribute("orImg");
	mui.openWindow({
		url:"order/order_history.html",
		id:"order_history.html",
		show:{
			autoShow:true,
			aniShow:"slide-in-right",//页面显示动画，默认为”slide-in-right“；
			duration:200,//页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
		},
		styles:{
			titleNView: {
				type:'transparent',//透明渐变样式
				titleText: '订单已送达',
				titleColor:'white',
				backgroundColor: '#EC971F',
				autoBackButton:true
			},
		},
		waiting:{
			autoShow:false,//自动显示等待框，默认为true
			title:'正在加载...',//等待对话框上显示的提示内容
		},
		extras:{
			resName:resName,
			orderCont:orderCont,
			orImg:orImg
		},
		});
})	
// 侧滑菜单
			//侧滑容器父节点
			var offCanvasWrapper = mui('#offCanvasWrapper');
			//主界面容器
			var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
			//菜单容器
			var offCanvasSide = document.getElementById("offCanvasSide");
			if (!mui.os.android) {
				var spans = document.querySelectorAll('.android-only');
				for (var i = 0, len = spans.length; i < len; i++) {
					spans[i].style.display = "none";
				}
			}
			//移动效果是否为整体移动
			var moveTogether = false;
			//主界面和侧滑菜单界面均支持区域滚动；
			//mui('#offCanvasSideScroll').scroll();
			mui('#offCanvasContentScroll').scroll();
			//实现ios平台原生侧滑关闭页面；
			if (mui.os.plus && mui.os.ios) {
				mui.plusReady(function() { //5+ iOS暂时无法屏蔽popGesture时传递touch事件，故该demo直接屏蔽popGesture功能
					plus.webview.currentWebview().setStyle({
						'popGesture': 'none'
					});
				});
			}
</script>
</body>
</html>
